<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>开多屏网页视频</title>
	<style>
		body{margin: 0;background-color:#DDDDDD;}
	</style>
</head>
<body>
	<input id="input" style="width:70%;" type="input">
	<input id="btn" type="button" value="地址输入后按确定">
	选择：<input type="radio"  name="selNum" id="sel2" checked="checked">2个 <input type="radio"  name="selNum" id="sel3">3个 <input type="radio"  name="selNum" id="sel4">4个
	<input type="button" value="清空" onclick="window.location.reload()">
	<!-- <input type="range" min="0" max="100" value="50" id="slider" onchange="updateSliderValue(this.value)"> -->
	<iframe id="i1" style="width:49.8%;height:400px;" src="" frameborder="0" scrolling="auto"></iframe>
	<iframe id="i2" style="width:49.8%;height:400px;" src="" frameborder="0" scrolling="auto"></iframe>
	<iframe id="i3" style="width:49.8%;height:400px;" src="" frameborder="0" scrolling="auto"></iframe>
	<iframe id="i4" style="width:49.8%;height:400px;" src="" frameborder="0" scrolling="auto"></iframe>
	<div id="videoControl1" style="position:absolute;left:0px;top:1000px;width:49.8%;height:400px;">
		<video id="video1" style="width:100%;height:100%;background-color:#444444;" src="" controls="controls" preload autoplay></video>
		<div style="height:40px;width:100%;background-color:#444444;color:#ffffff;">
			把视频文件拖到这里面   (支持格式mp4,webm,ogg)
			<div id="btnDiv1">
			</div>
		</div>
	</div>
	<div id="videoControl2" style="position:absolute;left:50%;top:1000px;width:49.8%;height:400px;">
		<video id="video2" style="width:100%;height:100%;background-color:#444444;;" src="" controls="controls" preload autoplay></video>
		<div style="height:40px;width:100%;background-color:#444444;color:#ffffff;">
			把视频文件拖到这里面   (支持格式mp4,webm,ogg)
			<div id="btnDiv2">
			</div>
		</div>
	</div>		
	<script>
		document.getElementById("btn").addEventListener("click",open);
		function open(e){
			var num=4;
			if(document.getElementById("sel2").checked==true)num=2;
			else if(document.getElementById("sel3").checked==true)num=3;
			for(var i=1;i<=4;i++){
				var iframe=document.getElementById(`i${i}`);
				if(num==2)  iframe.style.height="610px";
				else		iframe.style.height=window.innerHeight/2+"px";
				if(i<=num)	iframe.src=document.getElementById("input").value;
			}
			videoControl1.style.top=videoControl2.style.top=(window.innerHeight+100)+"px";
		}
		function updateSliderValue(value){
			for(var i=1;i<=4;i++){
				var iframe=document.getElementById(`i${i}`);
				iframe.style.webkitTransform = "scale(" + value/100 + ")"
			}
		}

		//-------------------------------
		var videoControl1 = document.getElementById("videoControl1");
		var btnDiv1=document.getElementById("btnDiv1");
		var video1=document.getElementById("video1");
		videoControl1.ondragover = function (e) {
				e.preventDefault();
			}
		videoControl1.ondrop = function (e) {
			console.log(e.dataTransfer.files);
			e.preventDefault();
			var files=e.dataTransfer.files;
			for(var i=0;i<files.length;i++){
				var file=files[i];
				var btn=document.createElement("input");
				btn.addEventListener("click",onClickVideo1);
				btn.type="button";
				//btn.style="background-color: #4CAF50;border: none;color: white;";
				btn.file=file;
				btn.value=file.name.split(".")[0];
				btnDiv1.appendChild(btn);
			}
			//console.log(btnDiv.children)
		}
		function onClickVideo1(e){
			//console.log(e.target.file);
			var file = e.target.file;  
			var reader = new FileReader();  
			reader.onload = function() {  
				video1.src=this.result;
			}
			reader.readAsDataURL(file);
		}
		//-------------------------------
		var videoControl2 = document.getElementById("videoControl2");
		var btnDiv2=document.getElementById("btnDiv2");
		var video2=document.getElementById("video2");
		videoControl2.ondragover = function (e) {
				e.preventDefault();
			}
		videoControl2.ondrop = function (e) {
			console.log(e.dataTransfer.files);
			e.preventDefault();
			var files=e.dataTransfer.files;
			for(var i=0;i<files.length;i++){
				var file=files[i];
				var btn=document.createElement("input");
				btn.addEventListener("click",onClickVideo2);
				btn.type="button";
				//btn.style="background-color: #4CAF50;border: none;color: white;";
				btn.file=file;
				btn.value=file.name.split(".")[0];
				btnDiv2.appendChild(btn);
			}
			//console.log(btnDiv.children)
		}
		function onClickVideo2(e){
			//console.log(e.target.file);
			var file = e.target.file;  
			var reader = new FileReader();  
			reader.onload = function() {  
				video2.src=this.result;
			}
			reader.readAsDataURL(file);
		}
	</script>
</body>

</html>